
<template>
  <div class="page">
    <s-header :name="'办件信息'" :back="'/record-apply/record-list?applyType=2'"></s-header>
    <van-collapse v-model="activeNames" class="collapse">
      <van-collapse-item title="开工申请信息" name="1">
        <div class="info-cell-direction">
          <div class="cell-label">申请内容</div>
          <div class="cell-value">{{ loitBuildStartApply.applyContent }}</div>
        </div>
        <div class="info-cell-direction">
          <div class="cell-label">现场图片</div>
          <div class="cell-value">
            <div v-for="(item, index) in loitBuildStartApply.photos" :key="index">
              <div class="file-item" @click="handleReview(item.url)">
                {{ item.name }}
                <span class="size" v-if="item.size">（{{ item.size }}）</span>
              </div>
            </div>
          </div>
        </div>
        <div class="info-cell-direction">
          <div class="cell-label">相关材料</div>
          <div class="cell-value">
            <div v-for="(item, index) in fileList" :key="index">
              <div class="file-item" @click="handleDownload(item.url, item.suffix)">
                {{ item.name }}
                <span class="size" v-if="item.size">（{{ item.size }}）</span>
              </div>
            </div>
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="申请人信息" name="2">
        <div class="info-cell">
          <div class="cell-label">姓名</div>
          <div class="cell-value">{{ buildApplyBase.applyName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">性别</div>
          <div class="cell-value">{{ buildApplyBase.applySex == '1' ? '男' : buildApplyBase.applySex == '2' ? '女' : buildApplyBase.applySex }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">年龄</div>
          <div class="cell-value">{{ buildApplyBase.applyAge }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">联系电话</div>
          <div class="cell-value">{{ buildApplyBase.applyPhone }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">身份证号</div>
          <div class="cell-value">{{ buildApplyBase.applyIdcard }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">户口所在地</div>
          <div class="cell-value">{{ buildApplyBase.applyCountryName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">家庭人口数</div>
          <div class="cell-value">{{ buildApplyBase.applyFamilySize }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">家庭住址</div>
          <div class="cell-value">{{ buildApplyBase.applyHouseAddress }}</div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="办理进度" name="3">
        <div class="info-cell">
          <div class="cell-label">办理阶段</div>
          <div class="cell-value">开工审批（乡镇政府）</div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="办理结果" name="5" v-show="loitBuildStartApplyHandle">
        <div class="info-cell">
          <div class="cell-label">办理人</div>
          <div class="cell-value">{{ loitBuildStartApplyHandle.handleUserName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">办理时间</div>
          <div class="cell-value">{{ loitBuildStartApplyHandle.handleTime }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">审查结果</div>
          <div class="cell-value">{{ loitBuildStartApplyHandle.reviewResultStr }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">办理意见</div>
          <div class="cell-value">{{ loitBuildStartApplyHandle.handleOpinions }}</div>
        </div>
      </van-collapse-item>
    </van-collapse>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { ImagePreview } from 'vant'
import sHeader from '@/components/SimpleHeader'
import { getStartApplyDetail } from '@/service/home'
export default {
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      from: route.query.from,
      activeNames: [],
      dataForm: {},
      buildApplyBase: {},
      loitBuildStartApply: {},
      loitBuildStartApplyHandle: {},
      fileList: [],
      pdfSrc: '', // pdf文件地址
      numPages: undefined,
    })

    // 全局属性
    const { converSize } = getCurrentInstance().appContext.config.globalProperties
    store.dispatch('getFileServerPrefix')

    onMounted(async () => {
      const { id } = route.params
      getStartApplyDetail(id).then((res) => {
        state.buildApplyBase = res.data.buildApplyBase
        state.loitBuildStartApply = res.data.loitBuildStartApply
        state.loitBuildStartApplyHandle = res.data.loitBuildStartApplyHandle
        if (state.loitBuildStartApply.photos && state.loitBuildStartApply.photos.length > 0) {
          state.loitBuildStartApply.photos.forEach((item) => {
            item.url = fileServerPrefix.value + item.url
            item.size = converSize(item.size)
          })
        } else {
          state.loitBuildStartApply.photos = []
        }
        let fileList = state.loitBuildStartApply.files.concat(state.loitBuildStartApply.others)
        fileList.forEach((item) => {
          item.url = fileServerPrefix.value + item.url
          item.size = converSize(item.size)
        })
        state.fileList = fileList
      })
    })

    const handleReview = (url) => {
      ImagePreview({
        images: [url],
        showIndex: true,
        showIndicators: true,
        closeable: true,
      })
    }

    const handleDownload = (url, suffix) => {
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        ImagePreview({
          images: [url],
          showIndex: true,
          showIndicators: true,
          closeable: true,
        })
      } else if (suffix === 'pdf') {
        window.open(url)
      } else {
        let a = document.createElement('a')
        a.href = url
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }

    const handleBack = () => {
      router.push({ path: '/record-apply/record-list', query: { applyType: 2 } })
    }

    const fileServerPrefix = computed(() => {
      return store.state.fileServerPrefix
    })

    return {
      fileServerPrefix,
      ...toRefs(state),
      handleBack,
      handleReview,
      handleDownload,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  .collapse {
    /deep/ .van-cell--clickable {
      margin-top: 10px;
      border-radius: 10px 10px 0 0;
      .van-cell__title {
        font-size: 15px;
        font-weight: bold;
      }
    }
    /deep/ .van-collapse-item__content {
      border-radius: 0 0 10px 10px;
    }
    .info-title {
      font-size: 15px;
      font-weight: 400;
      color: #3487f6;
      position: relative;
      margin-bottom: 6px;
      &:before {
        content: ' ';
        position: absolute;
        left: -10px;
        top: 7px;
        width: 6px;
        height: 6px;
        background-color: #3487f6;
        border-radius: 50%;
      }
    }
    .info-cell-direction {
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 8px;
      .cell-label {
        color: #9297ae;
      }
      .cell-value {
        color: #2e3f6a;
      }
    }
    .info-cell {
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 6px;
      .fj();
      .cell-label {
        min-width: 75px;
        color: #9297ae;
      }
      .cell-value {
        color: #2e3f6a;
      }
    }
  }
  .file-item {
    font-size: 13px;
    font-weight: 400;
    color: #3487f6;
    margin-bottom: 6px;
    .size {
      color: #9297ae;
    }
  }
  .btn-group {
    padding: 20px 0;
    .cus-btn {
      width: 100%;
    }
  }
}
</style>
